<template>
    <div id="imger-box">
        <div class="closeBtn" @click="closeImger" title="点击关闭"><Icon type="md-close" /></div>
        <div class="imger-contenter">
            <el-carousel :interval="4000" type="card" height="500px" trigger="click">
                <el-carousel-item class="img-box" v-for="(img,index) in imgArr" :key="index">
                    <img v-show="imgState[index].show" class="imger-img" :ref="'img' + index" :src="imgBaseUrl + img" @load="imgControl(index)" />
                    <div v-show="!imgState[index].show" class="img-loading"><i class="el-icon-loading"></i></div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
import * as api from '@/api/api';
export default {
    data() {
        return {
            imgBaseUrl: api.getImgBaseUrl(),
            imgArr: this.$store.state.imgArr,
            imgState: []
        }
    },
    created() {
        this.imgStateSet();
    },
    mounted() {
        
    },
    methods: {
        imgStateSet() {
            for (const item of this.imgArr) {
                let state = {
                    show: false
                }
                this.imgState.push(state)
            }
        },
        imgControl(e) {
            let imgRef = this.$refs['img'+e];
            if(imgRef[0].naturalWidth > imgRef[0].naturalHeight) {
                imgRef[0].style.width = '100%';
            }else {
                imgRef[0].style.height = '100%';
            }
            this.imgState[e].show = true;
            // setTimeout(() => {
            //     this.imgState[e].show = true;
            // }, 1000 * e)
        },
        closeImger(e) {
            e.stopPropagation()
            this.$store.state.isImgerShow = false;
            this.$store.state.imgArr = [];
        }
    }
}
</script>

<style lang="less">
#imger-box {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    background-color: rgba(0, 0, 0, 0.8);
    .closeBtn {
        position: absolute;
        top: 20px;
        right: 50px;
        font-size: 40px;
        background-color: rgba(255,255,255,.5);
        width: 50px;
        height: 50px;
        line-height: 44px;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        &:hover {
            background-color: rgba(255, 255, 255, .8)
        }
    }
    .imger-contenter {
        position: absolute;
        width: 80%;
        height: 60%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        .img-box {
            background-color: rgba(0, 0, 0, 0.8);
        }
        .img-loading {
            width: 100%;
            height: 100%;
            line-height: 500px;
            font-size: 30px;
            color: #1abc9c;
            text-align: center;
        }
        .imger-img {
            position: absolute;
            // width: 100%;
            // height: 60%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: all 10s;
        }
        .img-height {
            height: 100%;
        }
        .img-width {
            width: 100%;
        }
    }
}
</style>
